<template>
  <!-- 外层最大的盒子 -->
  <div class="permission">
    <!-- 卡片容器 -->
    <el-card>
      <!-- 上面的按钮 -->
      <div class="but">
        <el-button type="primary" size="small" @click="addopen(1, '0')"
          ><i class="el-icon-edit"></i>添加菜单</el-button
        >
      </div>
      <!-- 表格区域 加上个表示才能显示出子元素row-key="id"-->
      <el-table :data="tableData" style="width: 100%" row-key="id">
        <el-table-column prop="name" label="菜单名称" width="180">
        </el-table-column>
        <el-table-column prop="code" label="权限标识" width="180">
        </el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <!-- v-if="row.type !== 2"type不等于2的显示 ,@click="addopen(2, row.id)"用type和pid来区分是几级-->
            <el-button
              type="text"
              @click="addopen(2, row.id)"
              v-if="row.type !== 2"
              >添加权限</el-button
            >
            <el-button type="text">查看api权限</el-button>
            <el-button type="text" @click="open(row.id)">编辑</el-button>
            <el-button type="text" @click="cancel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑面板组件 -->
    <panel
      :panelShow.sync="panelShow"
      ref="mypanel"
      @updateList="getPerList"
    ></panel>
  </div>
</template>

<script>
// 导入获取所有权限数据
import { getPerListApi, delPerByIdApi } from "@/api/permission";
export default {
  data() {
    return {
      // 定义表格的数据内容
      tableData: [],
      // 定义数据用来控制编辑面板的显示与隐藏
      panelShow: false,
    };
  },

  // 定义方法
  methods: {
    // 给添加权限和添加菜单设置点击事件
    addopen(type, pid) {
      // 打开面板
      this.panelShow = true;
      // 获取到子组件中的对象保存type和pid
      this.$refs.mypanel.saveopen(type, pid);
    },

    // 给编辑设置点击事件
    open(id) {
      // 打开编辑面板
      this.panelShow = true;
      // 使用refs方法获取到子组件中的方法
      this.$refs.mypanel.getPerById(id);
    },

    //-------------------------------------------------------- 给删除设置点击事件
    async cancel(id) {
      //使用捕获错误的try方法
      try {
        // 弹出确认框提示用户
        await this.$confirm("提示", "你确定要删除嘛?");
        // 发送请求
        await delPerByIdApi(id);
        //提示删除成功
        this.$message.success("删除成功");
        // 刷新数据
        this.getPerList();
      } catch {
        this.$message.warning("取消成功");
      }
    },

    // -----------------------------------------------------------------获取所有权限数据的方法
    async getPerList() {
      // 发送请求
      const res = await getPerListApi();
      // 接收数据，把树状结构的数据赋值给他
      this.tableData = this.trunDate(res.data.data, "0");
    },

    // ---------------------------------------------------------定义一个方法转换数据为树状结构
    trunDate(arr, pid) {
      // 定义一个空数组
      const newArr = [];
      // 遍历数组
      arr.forEach((item) => {
        // 判断每一项中pid相同的也就是那出一级的数据
        if (item.pid === pid) {
          // 在调用这个方法取出一级下面的子元素
          const children = this.trunDate(arr, item.id);
          // 判断子数据得长度
          if (children.length > 0) {
            // 把子元素的数据赋值给一级的子级
            item.children = children;
          }
          //把item中的每一项追加到数组中
          newArr.push(item);
        }
      });
      // 返回出这个数据
      return newArr;
    },
  },

  //-------------------------------------------------------------------------- 渲染数据的钩子
  created() {
    // 页面一打开就调用获取所有权限数据的方法
    this.getPerList();
  },

  // 注册组件
  components: {
    panel: () => import("./components/panel.vue"),
  },
};
</script>

<style lang="scss">
.permission {
  margin: 30px;
  .but {
    text-align: right;
  }
}
</style>
